<template>
	<div class="bg-[#000] w-[100vw] h-[100vh]">
		<!--搜索-->
		<van-search class="search" v-model="keywords" show-action placeholder="请输入搜索关键词">
			<template #action>
				<div class="px-[8px] flex items-cneter text-[#fff]">
					搜索
				</div>
			</template>
			<template #left>
				<div class="px-[10px] items-cneter" @click="router.back()">
					<van-icon name="arrow-left" color="#fff" size="22" />
				</div>
			</template>
		</van-search>
		<div class="h-[100%]">
			<van-swipe class="h-[100%]" vertical :loop="false" :show-indicators="false" @change="changeSwipe"
				:initial-swipe="index">
				<van-swipe-item class="h-[100%]" v-for="item, index in playerList" :key="item.id">
					<div :id="'player' + index" class="player-container"
						:style="{ '--width': homeStore.showReview ? '600px' : '60px' }" @click="updatePlayerInfo">
						<!--右侧视频信息展示-->
						<div class="absolute right-[10px] bottom-[70px] overflow-hidden" v-show="!homeStore.showReview">
							<div @click="giveLike">
								<!--头像-->
								<van-image width="50" height="50" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
							</div>
							<div class="flex flex-col items-center py" @click="giveLike">
								<van-icon name="like" color="#fff" size="40" />
								<span class="text-[12px]">124.7万</span>
							</div>
							<div class="flex flex-col items-center py" @click.stop="chatHandler">
								<van-icon name="chat" color="#fff" size="40" />
								<span class="text-[12px]">4.7万</span>
							</div>
							<div class="flex flex-col items-center py" @click="giveLike">
								<van-icon name="star" color="#fff" size="40" />
								<span class="text-[12px]">14.7万</span>
							</div>
						</div>
						<!-- 底部信息 -->
						<div class="absolute bottom-[10px] left-[10px] w-[93%]" v-if="!homeStore.showReview">
							<!-- 名称 -->
							<div class="text-[18px] mb-[10px] font-bold">@杨老虎🐅(磕穿下巴掉牙版)</div>
							<!-- 标题 -->
							<div style="margin-top: 10px !important;">{{ item.description }} </div>
							<!-- 进度条 -->
							<div class="w-[100%]" style="margin-top: 10px !important" v-show="!homeStore.showReview">
								<van-progress :percentage="percent" pivot-color="#ffffff" pivot-text=""
									color="linear-gradient(to right, #be99ff, #7232dd)" />
							</div>
						</div>
					</div>
				</van-swipe-item>
			</van-swipe>
			<!--善语结善缘,恶语伤人心  -->
			<div class="message flex items-center px-[10px]">
				<div class="flex items-center">
					<img
						src="https://p3-pc.douyinpic.com/img/aweme-avatar/tos-cn-avt-0015_f14282e10099a4b436a9ca62c0902595~c5_168x168.jpeg?from=2956013662"
						class="w-[30px] h-[30px] rounded-[50%]">
					<div class="text-[#bababb] text-[14px] ml-[10px]">善语结善缘,恶语伤人心</div>
				</div>
			</div>
			<!--评论弹层-->
			<van-popup v-model:show="showReview" position="bottom" :style="{ height: '600px' }" :overlay="false"
				duration="0.2" round>
				<Comment v-if="homeStore.showReview"></Comment>
			</van-popup>
		</div>
	</div>
</template>

<script setup>
// 导入西瓜视频
import Player from 'xgplayer'
import 'xgplayer/dist/index.min.css'
import { QueryVideoList } from "@/api/home.js"
import { HlsPlugin } from "xgplayer-hls";
import { onMounted, ref, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router'
import useStore from "@/store"
import Comment from '@/Layout/components/Comment.vue'
const { homeStore } = useStore()
const route = useRoute()
const router = useRouter(99)
const playerList = ref([]) // 播放列表
const total = ref(0) // 数据量
let RefPlayer;
const percent = ref(0) // 进度条百分比值
const play = ref(false) // 播放状态
const index = ref(0) //轮播index
const keywords = ref("")
index.value = 1
if (route.query.index) {
	index.value = route.query.index
}
//弹层状态
const showReview = computed({
	get () {
		return homeStore.showReview
	},
	set (v) {
		homeStore.updateShowReview(v)
	}
})
const params = ref({
	page: 1,
	pageSize: 6
})
// 获取数据,播放视频
onMounted(async () => {
	const res = await QueryVideoList(params.value)
	playerList.value = res.data.records.filter(item => item.userId == 7)
	total.value = res.data.total
	setTimeout(() => {
		homeStore.updateCurrentPlayer(playerList.value[0])
		formatVideo(index.value, playerList.value[0].videoUrl)
	}, 200)
})

// 评论事件
const chatHandler = (e) => {
	homeStore.updateShowReview(true)
}

// 切换轮播事件
const changeSwipe = async (index) => {
	// 销毁上一个实例
	RefPlayer.destroy()
	// 进度条清零
	percent.value = 0;
	// 算出最大页码数
	const maxPage = Math.ceil(total.value / params.value.pageSize)
	if (params.value.page < maxPage && (index % (params.value.pageSize - 2)) == 0 && params.value.page == (playerList.value.length / params.value.pageSize)) {
		params.value.page += 1
		const res = await QueryVideoList(params.value)
		playerList.value.push(...res.data.records)
	}
	homeStore.updateCurrentPlayer(playerList.value[index])
	formatVideo(index, playerList.value[index].videoUrl)
}

// 视频格式化功能
const formatVideo = (id, url) => {
	RefPlayer = new Player({
		id: 'player' + id,
		url,
		fluid: true,
		autoplay: true,
		loop: true,
		videoInit: true,
		volume: 0, // 初始化时设置音量为 0，
		controls: false, // true/false决定是否使用底部控制栏，
		plugins: [HlsPlugin],
		// poster: poster_c, // 封面图
		ignores: ['fullscreen', 'volume'], // 禁用播放和暂停按钮
	})

	RefPlayer.on('timeupdate', function (val) {
		//算出时间百分比的值
		if (val.currentTime && val.duration) {
			percent.value = (val.currentTime / val.duration) * 100
		}
	})

	RefPlayer.on('play', function (val) {
		//算出时间百分比的值
		play.value = true
	})
}

// 播放暂停状态切换
const updatePlayerInfo = (e) => {
	if (homeStore.showReview) {
		homeStore.updateShowReview(false)
		return
	}
	// 判断点击是否不为小功能块
	const flag = e.target.classList.contains("parent")
	if (!flag) {
		if (RefPlayer.paused) {
			RefPlayer.play()
			play.value = true
		} else {
			RefPlayer.pause()
			play.value = false
		}
	}


}

</script>

<style lang="scss" scoped>
.search {
	width: 100%;
	position: fixed;
	background: rgba(255, 255, 255, 0);
	top: 0px;
	left: 0px;
	z-index: 1000000;
}

.player-container {
	position: relative;
	height: calc(100vh - var(--width)) !important;
	padding-top: 0px !important;
	transition: all 0.2s;
}

.py {
	padding: 10px 0;
}

.message {
	position: fixed;
	bottom: 10px;
	left: 10px;
	height: 42px !important;
	border-radius: 20px;
	width: 94%;
	background: #252525;
	z-index: 999;
}
</style>